<template>
  <div class="app-icon" :style="style">
    <icon-park
      style="width: 100%; height: 100%"
      :name="name"
      :color="color"
    />
  </div>
</template>

<script lang="ts" setup>
import IconPark from "./IconPark.vue"
import { computed } from "vue"

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    required: false,
    default: "#fff"
  },
  background: {
    type: String,
    required: false,
    default: "#09f"
  }
})

const style = computed(() => {
  return {
    background: props.background,
    borderRadius: "0.08rem"
  }
})
</script>

<style lang="scss">
.app-icon {
  --app-icon-size: 0.4rem;
  width: var(--app-icon-size);
  height: var(--app-icon-size);

  .icon-park {
    --icon-park-size: calc(var(--app-icon-size) - 0.09rem);
  }

  svg {
    height: 1em;
    width: 1em;

    path {
      stroke-width: 3px;
    }
  }
}
</style>
